<template>
    <div class="w100h100 p-2 justify-between">
        <div id="videoContainer" style="width: 80%;height: 100%;"></div>
        <div style="width: 19.5%;height: 100%;">
            <el-select v-model="NVR" value-key="id" @change="selectNVR()">
                <el-option v-for="ele of NVRList" :key="ele.id" :label="ele.cameraName" :value="ele" />
            </el-select>
            <el-select v-model="channelNo" class="mtb20px" @change="initPlayer()">
                <el-option v-for="(ele, index) of cameraList" :key="index" :label="ele.channelName"
                    :value="ele.channelNo" />
            </el-select>
            <el-date-picker v-model="date" style="width: 100%;" type="daterange" value-format="YYYY-MM-DD"
                start-placeholder="开始日期" end-placeholder="开始日期" @change="initPlayer()">
            </el-date-picker>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import * as myHttp from '@/api/surveillanceVideo';
import EZUIKit from 'ezuikit-js';

let accessToken = '';
let deviceSerial = '';
let player;

const NVRList = ref([]);
const NVR = ref();
const cameraList = ref([]);
const channelNo = ref(0);
const date = ref();

const getNVRList = async () => {
    const res = await myHttp.getNVRList({ pageNum: 1, pageSize: 999, });
    if (res.code == 200) {
        NVRList.value = res.rows;
        if (NVRList.value.length) {
            NVR.value = NVRList.value[0];
            selectNVR();
        }
    }
};

const selectNVR = async () => {
    deviceSerial = NVR.value.deviceSerial;
    await getEZAccessToken(NVR.value);
    getCameraList();
};

const getEZAccessToken = async ({ appKey, appSecret, }) => {
    const res = await myHttp.getEZAccessToken({ appKey, appSecret, });
    if (res.code == 200) {
        accessToken = res.msg;
    }
};

const getCameraList = async () => {
    const res = await myHttp.getCameraList({ accessToken, deviceSerial, pageNum: 1, pageSize: 999, });
    if (res.code == 200) {
        cameraList.value = res.rows;
        if (cameraList.value.length) {
            channelNo.value = cameraList.value[0].channelNo;
            initPlayer();
        }
    }
};

const initPlayer = () => {
    const url = `ezopen://open.ys7.com/${deviceSerial}/${channelNo.value}.hd.rec?begin=${date.value?.[0] ?? ''}&end=${date.value?.[1] ?? ''}`;
    if (player) {
        player.play({ accessToken, url, });
    } else {
        player = new EZUIKit.EZUIKitPlayer({
            id: 'videoContainer',
            accessToken,
            url,
            themeData: {
                'header': {
                    'color': '#1890ff',
                    'activeColor': '#FFFFFF',
                    'backgroundColor': '#000000',
                    'btnList': [],
                },
                'footer': {
                    'color': '#FFFFFF',
                    'activeColor': '#1890FF',
                    'backgroundColor': '#00000021',
                    'btnList': [
                        {
                            'iconId': 'play',
                            'part': 'left',
                            'defaultActive': 1,
                            'memo': '播放',
                            'isrender': 1,
                        },
                        {
                            'iconId': 'capturePicture',
                            'part': 'left',
                            'defaultActive': 0,
                            'memo': '截屏按钮',
                            'isrender': 1,
                        },
                        {
                            'iconId': 'sound',
                            'part': 'left',
                            'defaultActive': 0,
                            'memo': '声音按钮',
                            'isrender': 1,
                        },
                        {
                            'iconId': 'zoom',
                            'part': 'left',
                            'defaultActive': 0,
                            'memo': '电子放大',
                            'isrender': 1,
                        },
                        {
                            'iconId': 'webExpend',
                            'part': 'right',
                            'defaultActive': 0,
                            'memo': '网页全屏按钮',
                            'isrender': 1,
                        },
                        {
                            'iconId': 'expend',
                            'part': 'right',
                            'defaultActive': 0,
                            'memo': '全局全屏按钮',
                            'isrender': 1,
                        }
                    ],
                },
            },
        });
        player.play();
    }
};

onMounted(() => {
    getNVRList();
});
</script>

<style lang="less" module></style>
  